<template>
  <div class="test-container">
    <h2>API 测试页面</h2>

    <button @click="fetchData" :disabled="loading">
      {{ loading ? '加载中...' : '调用 AI 接口' }}
    </button>

    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="response" class="response">
      <h3>响应结果：</h3>
      <pre>{{ JSON.stringify(response, null, 2) }}</pre>
    </div>
  </div>
</template>

<script>
import { service_ai_remote } from '@/api/service/module/OpenAiChat';

export default {
  name: 'TestVue',
  data() {
    return {
      loading: false,
      response: null,
      error: null
    };
  },
  methods: {
    async fetchData() {
      this.loading = true;
      this.response = null;
      this.error = null;

      try {
        const res = await service_ai_remote();
        this.response = res.data;
      } catch (err) {
        this.error = err.message || '请求失败';
        console.error('API 请求异常:', err);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.test-container {
  padding: 20px;
  max-width: 600px;
  margin: auto;
}
button {
  padding: 10px 20px;
  font-size: 16px;
}
.error {
  color: red;
  margin-top: 10px;
}
.response {
  margin-top: 10px;
  white-space: pre-wrap;
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
}
</style>